<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<!-- <text class="header-title"></text> -->
			 <span class="header-title"></span>
		</view>
		
		<!-- 主体内容，带滑动动画 -->
		<view class="slider-wrapper">
			<view
				class="slider"
				:style="sliderStyle"
			>
				<!-- 主页内容 -->
				<view class="tab-content">
					<scroll-view  style="height: 100%;" scroll-y>
						<view class="control-panel">
							<view class="status-card">
								
								<view style="display: flex;align-content: center;">
									<view><uni-icons type="map-filled" :size="28" style="margin-right: 8rpx;" :color="'#55ffff'"></uni-icons></view>
										<view><text class="card-title" style="margin-right: 40rpx;">环境数据</text></view>
										<view><uni-icons type="location-filled" :color="'#00aa00'" :size="28"></uni-icons></view>
										<view><text class="card-title" style="display: flex;justify-content: flex-end;">{{weatherData.city || '北京'}}</text></view>
								</view>
								

								<view class="status-info">
									<view style="display: flex;flex-direction: row;">
										<view style="display: flex;flex-direction: column;gap: 20rpx; flex-shrink: 0; width: 240rpx; ">
											<view style="background-color: #dbdcff;border-radius: 12rpx;"><text class="status-info_text">温度: {{weatherData.temperature || '25'}}°C</text></view>
											<view style="background-color: #bcfaff;border-radius: 12rpx;"><text class="status-info_text">湿度: {{weatherData.humidity || '75'}}%</text></view>
											<view style="background-color: #fffab8;border-radius: 12rpx;"><text class="status-info_text">天气: {{weatherData.weather || '好天气'}}</text></view>
											<view style="background-color: #ddffc0;border-radius: 12rpx;"><text class="status-info_text">风向: {{weatherData.windDirection || '西北'}}风</text></view>
											<view style="background-color: #ffd8ed;border-radius: 12rpx;"><text class="status-info_text">风力: {{weatherData.windPower || '8'}}级</text></view>
										</view>
										
										
										
										<!-- 右侧图片容器：自动填充剩余空间，图片居中/居右 -->
										<view style="flex-grow: 1; display: flex; align-items: center; justify-content: flex-end;">
											<!-- 天晴 -->
										  <image 
											v-show="weatherData.weather ==='晴'"
											src="/static/images/Sunnyday.png" 
											mode="widthFix" 
											style="max-width: 240rpx; height: auto;" 
										  ></image>
										  <!-- 多云 -->
										  <image
											v-show="weatherData.weather ==='阴' || weatherData.weather === '多云'"
											src="/static/images/cloudday.png" 
											mode="widthFix" 
											style="max-width: 240rpx; height: auto;" 
										  ></image>
										  <!-- 雨 /小雨 天 -->
										  <image
											v-show="weatherData.weather ==='雨'|| weatherData.weather === '小雨' "
											src="/static/images/littlerain.png" 
											mode="widthFix" 
											style="max-width: 240rpx; height: auto;" 
										  ></image>
										  <!-- 大雨 -->
										  <image
											v-show="weatherData.weather === '大雨'"
											src="/static/images/heavyrain.png" 
											mode="widthFix" 
											style="max-width: 240rpx; height: auto;" 
										  ></image>
										  <!-- 下雪 -->
										  <image
											v-show="weatherData.weather ==='雪'"
											src="/static/images/snow.png" 
											mode="widthFix" 
											style="max-width: 240rpx; height: auto;" 
										  ></image>
										</view>
									</view>
						
								</view>
							</view>
							
							<view class="status-card" style="display: flex;justify-content: left;">
								<view @click="savadata"><uni-icons type="loop" size="24" :color="'#55aaff'"></uni-icons></view>
								<view><span style="width: 2rpx;"></span>数据更新时间:{{weatherData.reportTime}}</view>
							</view>
							
							
							<view class="status-card">
								<uni-icons type="bars" :size="24" style="margin-right: 8rpx;"></uni-icons>
								<text class="card-title">卷帘门状态</text>
								<view class="status-info">
									<view class="status-info-row">
										<view><text class="status-info_text">网络在线</text></view>
										<view><uni-icons type="checkbox-filled" :color="'#0055ff'"></uni-icons></view>
									</view>								
									<view class="status-info-row">
										<view><text class="status-info_text">开关状态: {{door_status}}</text></view>
										<view v-show="door_status === '开启'"><uni-icons type="circle-filled" :color="'#0055ff'" :size="20" ></uni-icons></view>
										<view v-show="door_status === '关闭'"><uni-icons type="circle-filled" :color="'#ff0000'" :size="20" ></uni-icons></view>
										<view v-show="door_status === '自动模式'"><uni-icons type="flag-filled" :color="'#3aa39f'" :size="20" ></uni-icons></view>
									</view>
								</view>
							</view>
							<view class="status-card">
							  <!-- 图表容器：设置 flex 布局 -->
							  <view style="display: flex; flex-direction: row; gap: 20rpx; justify-content: space-around; align-items: center; padding: 20rpx;">
							    <!-- 第一个图表 -->
							    <view class="charts-box" style="flex: 1; max-width: 48%;"> <!-- 占容器宽度的约 48% -->
							      <qiun-data-charts 
							        type="arcbar"
							        :opts="opts1"
							        :chartData="chartData1"
							      />
							    </view>
							
							    <!-- 第二个图表 -->
							    <view class="charts-box" style="flex: 1; max-width: 48%;"> <!-- 占容器宽度的约 48% -->
							      <qiun-data-charts 
							        type="arcbar"
							        :opts="opts2"
							        :chartData="chartData2"
							      />
							    </view>
							  </view>
							</view>
							
							<!-- 添加阈值控制面板 -->
							<view class="threshold-control">
								<view class="threshold-item">
									<text class="threshold-label">设置温度阈值</text>
									<view class="threshold-input-group">
										<button class="threshold-btn" @click="adjustThreshold('temperature', -1)">-</button>
										<input type="number" v-model="temperature_max" class="threshold-input" @input="handleThresholdInput('temperature')" />
										<button class="threshold-btn" @click="adjustThreshold('temperature', 1)">+</button>
									</view>
								</view>
								<view class="threshold-item">
									<text class="threshold-label">设置湿度阈值</text>
									<view class="threshold-input-group">
										<button class="threshold-btn" @click="adjustThreshold('humidity', -1)">-</button>
										<input type="number" v-model="humidity_max" class="threshold-input" @input="handleThresholdInput('humidity')" />
										<button class="threshold-btn" @click="adjustThreshold('humidity', 1)">+</button>
									</view>
								</view>
							</view>
							
							<view class="control-buttons">
								<button type="default" class="button" style="color: #00aaff;" @click="controlCurtain('up')">开启卷帘</button>
								<button type="default" class="button" style="color: #aa0000;" @click="controlCurtain('down')">关闭卷帘</button>
								<button type="default" class="button" style="color: #3aa39f;" @click="controlCurtain('auto')">自动模式</button>
								
							</view>
							
						
						</view>
					</scroll-view>
				</view>
				<!-- 关于内容 -->
				<view class="tab-content">
					<scroll-view class="about-scroll" scroll-y>
						<view class="about-card">
							<text class="about-title">智能温室控制系统</text>
							<text class="about-text">智能温室控制系统是一款专业的农业物联网解决方案，致力于为温室种植提供智能化管理。</text>
							<view class="feature-list">
								<view class="feature-item">
									<uni-icons type="checkmarkempty" size="20" color="#3aa39f"></uni-icons>
									<text>智能温控</text>
								</view>
								<view class="feature-item">
									<uni-icons type="checkmarkempty" size="20" color="#3aa39f"></uni-icons>
									<text>自动卷帘</text>
								</view>
								<view class="feature-item">
									<uni-icons type="checkmarkempty" size="20" color="#3aa39f"></uni-icons>
									<text>远程监控</text>
								</view>
								<view class="feature-item">
									<uni-icons type="checkmarkempty" size="20" color="#3aa39f"></uni-icons>
									<text>数据分析</text>
								</view>
							</view>
						</view>
						
						<view class="about-card">
							<text class="about-title">说明一</text>
							<text class="about-text"><b>该系统通过控制温室卷帘门，以获得温室内的作物的最佳生长环境。</b>可以根据操作者设定的温度、湿度阈值自动控制温室卷帘门的开关状态、温度控制设备(模拟)、湿度控制设备(模拟): 当环境温度大于默认温度或环境温度大于设定的阈值温度，自动降温设备会自动开启(模拟); 当环境湿度大于默认湿度或环境湿度大于设定的阈值湿度，自动除湿设备也会自动开启(模拟)。</text>
						</view>
						<view class="about-card">
							<text class="about-title">说明二</text>
							<text class="about-text">操作者可以手动控制卷帘门的开关状态，在默认情况下自动卷帘门处于"自动模式"状态下，当且仅当环境温度大于默认温度或环境温度大于设定的阈值温度时，卷帘门退出自动模式，进入开启状态，便于通风。</text>
						</view>
						<view class="about-card">
							<text class="about-title">说明三</text>
							<text class="about-text">由于缺少实际测试与检测环境，该项目关于卷帘门等的相关操作均为<b>模拟</b>。天气数据来自<a href="https://console.amap.com/" style="color: #00aaff;">高德开放平台</a>。</text>
							<text class="about-text" style="font-size: 32rpx;">若涉及到敏感数据，请联系开发者删除：1802602794@qq.com(何**)</text>
						</view>
					</scroll-view>
				</view>
				<!-- 我的内容 -->
				<view class="tab-content">
					<view class="user-info">
						<image class="avatar" src="/static/images/yellowduck.png"></image>
						<text class="username" >{{nickname}}</text>
						<text class="user-role">你的名字</text>
					</view>
					<view class="settings-list">
						<view class="settings-group">
							<view class="settings-item" @click="handleUpdateNickname">
								<view class="item-left" >
									<uni-icons type="refresh" size="24" color="#666"></uni-icons>
									<text>修改昵称</text>
								</view>
								<uni-icons type="right" size="16" color="#999"></uni-icons>
							</view>
							<view class="settings-item" @click="handleDeleteAccount">
								<view class="item-left">
									<uni-icons type="minus" size="24" color="#666"></uni-icons>
									<text>注销账号</text>
								</view>
								<uni-icons type="right" size="16" color="#999"></uni-icons>
							</view>
							<view class="settings-item" @click="handlequit">
								<view class="item-left">
									<uni-icons type="closeempty" size="24" color="#666"></uni-icons>
									<text>退出</text>
								</view>
								<uni-icons type="right" size="16" color="#999"></uni-icons>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>

		<!-- 自定义底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
				<uni-icons :type="activeTab === 0 ? 'home-filled' : 'home'" size="24" :color="activeTab === 0 ? '#3aa39f' : '#666'"></uni-icons>
				<text>主页</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
				<uni-icons :type="activeTab === 1 ? 'info-filled' : 'info'" size="24" :color="activeTab === 1 ? '#3aa39f' : '#666'"></uni-icons>
				<text>关于</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 2 }" @click="switchTab(2)">
				<uni-icons :type="activeTab === 2 ? 'person-filled' : 'person'" size="24" :color="activeTab === 2 ? '#3aa39f' : '#666'"></uni-icons>
				<text>我的</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref,reactive, computed,onMounted, watch ,onUnmounted} from 'vue';
// import { handleUpdateNickname } from '@/pages/index/optimized-modal'
// let temperature = weatherData.temperature.value
// let huimality = weatherData.humidity.value
let lux = ref(0)
let atitude = ref()
let pressure = ref()
let door_status = ref('自动模式')

let weatherData = reactive({
  city: '',
  weather: '',
  temperature: '',
  humidity: '',
  windDirection: '',
  windPower: '',
  reportTime: ''
});


const savadata = () => {
  try{
	  uni.request({
	    url: 'http://192.168.43.1:8080/storageWeatherdata',
	    method: 'POST',
	    data: {
	      city: weatherData.city,
	      weather: weatherData.weather,
	      temperature: weatherData.temperature,
	      humidity: weatherData.humidity,
	      winddirection: weatherData.windDirection,
	      windpower: weatherData.windPower,
	      reporttime: weatherData.reportTime
	    },
	    success(res) {
	      if (res.data.code === 9001) {
	        console.log("存储成功");
	      } else {
	        console.log("存储失败，错误码：" + res.data.code);
			console.log("错误信息：" + res.data.msg);
	      }
	    },
	    fail(err) {
	      console.log("请求失败：", err.errMsg);
	    }
	  });
  }
  catch{
	  console.log("请求失败");
  }
}

async function fetchWeather() {
  try {
    const { data } = await uni.request({
      url: 'https://restapi.amap.com/v3/weather/weatherInfo',
      method: 'GET',
      data: {
        city: '长沙市',
        key: '23654703295446878d09cfac039cf966'
      }
    });
    
    // 检查 API 状态
    if (data.status === '1') {
	const resData = data.lives[0];
	console.log('城市:', resData.city);
	console.log('天气:', resData.weather);
	console.log('温度:', resData.temperature + '°C');
      
	// 返回结构化数据
      
	weatherData.city = resData.city;
	weatherData.weather = resData.weather;
	weatherData.temperature = resData.temperature;
	weatherData.humidity = resData.humidity;
	weatherData.windDirection = resData.winddirection;
	weatherData.windPower = resData.windpower;
	weatherData.reportTime = resData.reporttime;
	
	
      
    } else {
      throw new Error(`API错误: ${data.info}`);
    }
  } catch (error) {
    console.error('请求失败:', error);
    throw error;
  }
}
// 调用函数
// fetchWeather();


// 添加防抖函数
const debounce = (fn, delay) => {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

// 添加原始阈值和防抖后的阈值
const temperature_max = ref(40);
const humidity_max = ref(100);
const debouncedTemperatureMax = ref(40);
const debouncedHumidityMax = ref(100);

// 添加提示状态标志
const temperatureAlertShown = ref(false);
const humidityAlertShown = ref(false);

// 更新防抖后的阈值
const updateDebouncedTemperature = debounce((value) => {
  debouncedTemperatureMax.value = value;
}, 500);

const updateDebouncedHumidity = debounce((value) => {
  debouncedHumidityMax.value = value;
}, 500);

// 监听阈值变化
watch(temperature_max, (newValue) => {
  updateDebouncedTemperature(newValue);
});

watch(humidity_max, (newValue) => {
  updateDebouncedHumidity(newValue);
});

// 修改计算属性，使用防抖后的阈值
const temperature_rate = computed(() => {
  const temp = Number(weatherData.temperature) || 0;
  const rate = Math.min(temp / debouncedTemperatureMax.value, 1);
  // 当温度超过阈值且未显示过提示时显示提示
  if (temp > debouncedTemperatureMax.value && !temperatureAlertShown.value) {
    temperatureAlertShown.value = true;
    uni.showModal({
      title: '温度警告',
      content: '温度过高，降温设备已开启',
      showCancel: false,
      confirmText: '我知道了',
      success: () => {
        setTimeout(() => {
          temperatureAlertShown.value = false;
          door_status.value = '开启';
        }, 5000);
      }
    });
  }
  return rate;
});

const huimality_rate = computed(() => {
  const humi = Number(weatherData.humidity) || 0;
  const rate = Math.min(humi / debouncedHumidityMax.value, 1);
  // 当湿度超过阈值且未显示过提示时显示提示
  if (humi > debouncedHumidityMax.value && !humidityAlertShown.value) {
    humidityAlertShown.value = true;
    uni.showModal({
      title: '湿度警告',
      content: '湿度过高，除湿设备已开启',
      showCancel: false,
      confirmText: '我知道了',
      success: () => {
        setTimeout(() => {
          humidityAlertShown.value = false;
        }, 5000);
      }
    });
  }
  return rate;
});

// 修改图表数据，使用防抖后的阈值
const chartData1 = computed(() => ({
  series: [{ 
    name: "温度阈值", 
    color: temperature_rate.value > 0.8 ? "#ff0000" : "#2fc25b", 
    data: temperature_rate.value
  }]
}));

const chartData2 = computed(() => ({
  series: [{ 
    name: "湿度阈值", 
    color: huimality_rate.value > 0.8 ? "#ff0000" : "#55aaff", 
    data: huimality_rate.value
  }]
}));

// 添加图表配置
const opts1 = ref({
  title: { 
    name: computed(() => {
      const rate = temperature_rate.value;
      return isNaN(rate) ? '0%' : `${Math.round(rate * 100)}%`;
    }),
    fontSize: 35,
    color: computed(() => temperature_rate.value > 0.8 ? "#ff0000" : "#2fc25b")
  },
  subtitle: { name: "温度阈值占比", fontSize: 12, color: "#666666" },
  extra: { arcbar: { width: 12, backgroundColor: "#E9E9E9" } }
});

const opts2 = ref({
  title: { 
    name: computed(() => {
      const rate = huimality_rate.value;
      return isNaN(rate) ? '0%' : `${Math.round(rate * 100)}%`;
    }),
    fontSize: 35,
    color: computed(() => huimality_rate.value > 0.8 ? "#ff0000" : "#55aaff")
  },
  subtitle: { name: "湿度阈值占比", fontSize: 12, color: "#666666" },
  extra: { arcbar: { width: 12, backgroundColor: "#E9E9E9" } }
});

const activeTab = ref(0);

const controlCurtain = (action) => {
	let mode = 'null'
	if(action === 'auto'){
		door_status.value = '自动模式'
		mode='自动模式';
	}
	else if(action === 'up'){
		door_status.value = '开启'
		mode='正在开启卷帘';
	}
	else{
		door_status.value = '关闭'
		mode='正在关闭卷帘';
	}
	uni.showToast({
		title: mode,
		icon: 'none'
	});
};

const switchTab = (index) => {
	activeTab.value = index;
};

const sliderStyle = computed(() => {
	const offset = -activeTab.value * 100;
	return `transform: translateX(${offset}vw); transition: transform 0.6s cubic-bezier(.55,0,.1,1); width: 300vw; display: flex;`;
});

// 添加手动输入处理方法
const handleThresholdInput = (type) => {
  if (type === 'temperature') {
    const currentTemp = Number(weatherData.temperature) || 0;
    if (currentTemp > temperature_max.value && !temperatureAlertShown.value) {
      temperatureAlertShown.value = true;
      uni.showModal({
        title: '温度警告',
        content: '温度过高，降温设备已开启',
        showCancel: false,
        confirmText: '我知道了',
        success: () => {
          setTimeout(() => {
            temperatureAlertShown.value = false;
            door_status.value = '开启';
          }, 5000);
        }
      });
    }
  } else if (type === 'humidity') {
    const currentHumi = Number(weatherData.humidity) || 0;
    if (currentHumi > humidity_max.value && !humidityAlertShown.value) {
      humidityAlertShown.value = true;
      uni.showModal({
        title: '湿度警告',
        content: '湿度过高，除湿设备已开启',
        showCancel: false,
        confirmText: '我知道了',
        success: () => {
          setTimeout(() => {
            humidityAlertShown.value = false;
          }, 5000);
        }
      });
    }
  }
};

// 修改阈值调整方法
const adjustThreshold = (type, delta) => {
  if (type === 'temperature') {
    const newValue = Number(temperature_max.value) + delta;
    if (newValue >= 0 && newValue <= 200) {
      temperature_max.value = newValue;
      // 检查当前温度是否超过新阈值
      const currentTemp = Number(weatherData.temperature) || 0;
      if (currentTemp > newValue && !temperatureAlertShown.value) {
        temperatureAlertShown.value = true;
        uni.showModal({
          title: '温度警告',
          content: '温度过高，降温设备已开启',
          showCancel: false,
          confirmText: '我知道了',
          success: () => {
            setTimeout(() => {
              temperatureAlertShown.value = false;
              door_status.value = '开启';
            }, 5000);
          }
        });
      }
    }
  } else if (type === 'humidity') {
    const newValue = Number(humidity_max.value) + delta;
    if (newValue >= 0 && newValue <= 200) {
      humidity_max.value = newValue;
      // 检查当前湿度是否超过新阈值
      const currentHumi = Number(weatherData.humidity) || 0;
      if (currentHumi > newValue && !humidityAlertShown.value) {
        humidityAlertShown.value = true;
        uni.showModal({
          title: '湿度警告',
          content: '湿度过高，除湿设备已开启',
          showCancel: false,
          confirmText: '我知道了',
          success: () => {
            setTimeout(() => {
              humidityAlertShown.value = false;
            }, 5000);
          }
        });
      }
    }
  }
};

const handlequit = ()=>{
	uni.redirectTo({
		url:'/pages/login/Login'
	})
}

const userInfo = ref(uni.getStorageSync('userInfo') || {})
const nickname = computed(() => userInfo.value.nickname || '默认昵称')
const handleUpdateNickname = () => {
  uni.showModal({
    title: '修改昵称(2-10位)',
    // content: 'null',
    editable: true,
	icon: 'paperplane-filled',
	confirmText: '确认',
	confirmColor: '#00aaff',
	cancelText: '取消',
	cancelColor: '#aa0000',
    placeholderText: '请输入新昵称',
    inputType: 'nickname',  // 自动唤起姓名键盘
    success: (res0) => {
      if (res0.confirm) {
        if (!res0.content) {
          uni.showToast({ title: '昵称不能为空', icon: 'none' });
          return;
        }
        if (res0.content.length < 2 || res0.content.length > 10) {
          uni.showToast({ title: '昵称长度需为2-10位', icon: 'none' });
          return;
        }
		
		const requestData = {
			phone : userInfo.value.phone,
			username : res0.content,
			password : userInfo.value.password
		};
		
		uni.request({
		  url: 'http://192.168.43.1:8080/rename',
		  method: 'POST',
		  header: {
			'Content-Type': 'application/json'
		  },
		  data: requestData,
		  timeout: 5000,
		  success: (res) => {
			// 处理成功响应
			if (res.data && res.data.code === 6001) {
			  // 更新昵称值
			  userInfo.value.nickname = res0.content;
			  uni.showToast({ title: '修改成功', icon: 'success' });
			} else {
			  // 业务错误
			  uni.showToast({
				title: res.data?.msg || '修改失败，请稍后重试',
				icon: 'none',
				duration: 2500
			  });
			}
		  },
		  fail: (err) => {
			// 业务错误
			console.log('请求错误:',err);
			uni.showToast({
			  title: res.data?.msg || '网络错误，请稍后重试',
			  icon: 'none',
			  duration: 2500
			});
		  },
		  complete: () => {
			// 请求完成后的操作（无论成功或失败）
		  }
		});
      }
    }
  })
}


const handleDeleteAccount = () => {
  uni.showModal({
    title: '注销账号',
    content: '请输入密码确认注销',
    editable: true,
    placeholderText: '密码',
    confirmText: '确认注销',
    cancelText: '取消',
    success: (res0) => {
      if (res0.confirm) {
        // 输入验证
        if (!res0.content) {
          uni.showToast({ title: '输入不能为空', icon: 'none' });
          return;
        }

        try {
          uni.request({
            url: 'http://192.168.43.1:8080/handleDeleteAccount',
            method: 'POST',
            header: {
          	'Content-Type': 'application/json'
            },
            data: {
				phone : userInfo.value.phone,
				password : res0.content
			},
            timeout: 5000,
            success: (res) => {
          	// 处理成功响应
          	if (res.data && res.data.code === 7001) {
          	  uni.removeStorageSync('userInfo');
			  uni.showToast({
				title: '注销成功',
				icon: 'none',
				duration: 2500
			  });
			  setTimeout(() => {
			    uni.redirectTo({
			      url: '/pages/login/Login'
			    });
			  }, 2000);
          	} else {
          	  // 业务错误
          	  uni.showToast({
          		title: res.data?.msg || '修改失败，请稍后重试',
          		icon: 'none',
          		duration: 2500
          	  });
          	}
            },
            fail: (err) => {
          	// 业务错误
          	console.log('请求错误:',err);
          	uni.showToast({
          	  title: res.data?.msg || '网络错误，请稍后重试',
          	  icon: 'none',
          	  duration: 2500
          	});
            },
            complete: () => {
          	// 请求完成后的操作（无论成功或失败）
            }
          });
        } catch (error) {
          uni.hideLoading();
          uni.showToast({ title: '请求异常', icon: 'none' });
          console.error('注销错误:', error);
        }
      }
    }
  });
}

let timer = null;

const startRefresh = () => {
  timer = setInterval(() => {
	fetchWeather(); // 定时刷新
	savadata();
  }, 600000); // 10分钟（600000ms）
};


// 组件挂载后初始化
onMounted(() => {
  fetchWeather();
  userInfo.value = uni.getStorageSync('userInfo') || {};
  startRefresh(); // 启动定时器
});

onUnmounted(() => {
  clearInterval(timer); // 组件卸载时清除定时器
});
</script>

<style scoped>

	
.charts-box {
  width: 100%;
  height: 250rpx;
  margin-top: 20rpx;
}
	
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-image: url("/static/images/bg_image_1.png");
	background-size: cover; /* 覆盖整个容器 */
	background-position: center; /* 居中显示 */
	background-repeat: no-repeat; /* 禁止重复 */
}

.header {
	height: 88rpx;
	background-color: #3aa39f;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30rpx;
}

.header-title {
	color: #FFFFFF;
	font-size: 36rpx;
	font-weight: bold;
}

.slider-wrapper {
	flex: 1;
	overflow: hidden;
	/* background:  #ffffff; */
	position: relative;
}

.slider {
	height: 100%;
	display: flex;
}

.tab-content {
	width: 100vw;
	min-height: 100%;
	box-sizing: border-box;
	padding: 20rpx;
}

/* 主页内容样式 */
.control-panel {
	padding: 20rpx;
}

.status-card {
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 10rpx;
	background-color: rgba(255, 255, 255, 0.6); /* 设置背景为半透明白色 */
	backdrop-filter: blur(10px); /* 添加毛玻璃效果 */
	-webkit-backdrop-filter: blur(10px); /* 兼容 Safari */
	border-top: 1rpx solid rgba(255, 255, 255, 0.7); /* 半透明边框 */
}

.card-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.status-info {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	margin-top: 0rpx;
}

.status-info-row {
	display: flex;
	align-items: center;
	gap: 48rpx; /* 图标和文字间距，可调整 */
  }

.status-info_text{
	margin-top: 0rpx;
}


.control-buttons {
	display: flex;
	gap: 20rpx;
	margin-top: 20rpx;
	color: #ffffff;
}

.button{
	font-size: 28rpx;
	margin-top: 5rpx;
	background-color: rgba(255, 255, 255, 0.6); /* 设置背景为半透明白色 */
	backdrop-filter: blur(10px); /* 添加毛玻璃效果 */
	-webkit-backdrop-filter: blur(10px); /* 兼容 Safari */
	border-top: 1rpx solid rgba(255, 255, 255, 0.7); /* 半透明边框 */
}

.button::hover{
	background-color: #ffffff;
}


/* 关于内容样式 */
.about-scroll {
	height: calc(100vh - 200rpx); /* 减去头部和底部导航的高度 */
	padding: 0rpx;
}

.about-card {
	background-color: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.about-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	display: block;
}

.about-text {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
	margin-bottom: 30rpx;
	display: block;
}

.feature-list {
	margin-top: 20rpx;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 10rpx;
	margin-bottom: 15rpx;
}

.feature-item text {
	font-size: 28rpx;
	color: #333;
}

/* 我的内容样式 */
.user-info {
	background-color: #FFFFFF;
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
}

.avatar {
	width: 150rpx;
	height: 150rpx;
	border-radius: 75rpx;
	margin-bottom: 20rpx;
}

.username {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.user-role {
	font-size: 24rpx;
	color: #666;
}

.settings-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.settings-group {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	overflow: hidden;
}

.settings-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #EEEEEE;
}

.settings-item:last-child {
	border-bottom: none;
}

.item-left {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.item-left text {
	font-size: 28rpx;
	color: #333;
}

/* 自定义底部导航栏样式 */
.tab-bar {
  height: 100rpx;
  background-color: rgba(255, 255, 255, 0.5); /* 设置背景为半透明白色 */
  backdrop-filter: blur(10px); /* 添加毛玻璃效果 */
  -webkit-backdrop-filter: blur(10px); /* 兼容 Safari */
  display: flex;
  border-top: 1rpx solid rgba(238, 238, 238, 0.7); /* 半透明边框 */
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #666;
	gap: 4rpx;
}

.tab-item.active {
	color: #3aa39f;
}

.threshold-control {
	margin-top: 20rpx;
	padding: 20rpx;
	background-color: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 12rpx;
}

.threshold-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.threshold-item:last-child {
	margin-bottom: 0;
}

.threshold-label {
	font-size: 28rpx;
	color: #333;
}

.threshold-input-group {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.threshold-btn {
	width: 60rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	background-color: #3aa39f;
	color: #fff;
	border-radius: 8rpx;
	padding: 0;
	font-size: 32rpx;
}

.threshold-input {
	width: 100rpx;
	height: 60rpx;
	text-align: center;
	background-color: #fff;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	font-size: 28rpx;
}
</style>